<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<!-- 导入jQuery库 -->
	<!--<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>-->
	<script type="text/javascript" >
		//网页刚进来就执行
		window.document.ready = function(){
//			alert("window.document.ready");
		}		
		
		//DOM全部加载完毕执行
		window.onload = function(){
//			alert("window.onload");
		}
	</script>
	</head>
	<body>

<script type="text/javascript" >
/*
	一、JavaScript :
	1、在父窗口中获取iframe中的元素
	
	格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 
	实例：window.frames["ifm"].document.getElementById("btnOk").click(); 
	 
	格式： 
	var obj=document.getElementById("iframe的name").contentWindow; 
	var ifmObj=obj.document.getElementById("iframe中控件的ID"); 
	ifmObj.click(); 
	实例： 
	var obj=document.getElementById("ifm").contentWindow; 
	var ifmObj=obj.document.getElementById("btnOk"); 
	ifmObj.click(); 
	
	在iframe中获取父窗口的元素
	
	格式：window.parent.document.getElementById("父窗口的元素ID").click(); 
	实例：window.parent.document.getElementById("btnOk").click(); 
	Jquery
	在父窗口中获取iframe中的元素
	
	格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1 
	实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1 
	 
	格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2 
	实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2 
	
	在iframe中获取父窗口的元素
	
	格式：$('#父窗口中的元素ID', parent.document).click(); 
	实例：$('#btnOk', parent.document).click(); 	
*/	
</script>		

<div style="border: 10px red solid;width: 600px;height: 600px;">
	这个是外部的嵌套的iframe<br />
	<iframe src="innerIframe.html" id="mainFrame" name="mainFrame"
		style="overflow:scroll;border: 10px blue solid;width: 550px;height: 550px;" 
		scrolling="yes"></iframe>
</div>

<button id="getSub">原生JS获得嵌套的iframe的内容和方法</button>
<button id="getSubjQuery">jQuery获得嵌套的iframe的内容和方法</button>
<p id="fp">这个是父窗体的一段话</p>

<script type="text/javascript" src="../../lib/jq/jquery-1.11.3.min.js" ></script>
<script>
	function pf(){
		console.log("这个是父窗体的  pf() 方法");
	}
	
	// 原生JS方法
	document.getElementById("getSub").onclick = function(){
		// 获得 iframe 嵌套的窗体对象
//		var obj = document.getElementById("mainFrame").contentWindow; // 方法1
		var obj = window.frames["mainFrame"]; // 方法 2
		var sp = obj.document.getElementById("sp").innerHTML; // 获得iframe 嵌套窗体元素值
		console.log(sp)
		obj.sf(); // 调用iframe嵌套窗体的方法
		
	}
	
	// 使用 jQuery
	$("#getSubjQuery").click(function(){
		// 获得 获得 iframe 嵌套的窗体对象
		var obj = $("#mainFrame").contents(); // 获得子窗体 DOM 节点对象
		var obj2 = $("#mainFrame")[0].contentWindow; // 获得子窗体window对象
		var sp = obj.find("#sp").text();
		console.log(obj);
		console.log(obj2);
		console.log(sp);
		obj2.sf(); // 调用子窗体方法
	});
	
</script>		
		
	</body>
</html>
